
<template>
  <div class="container">
    <!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 表单 -->
        <el-form :inline="true" :model="Query" class="demo-form-inline">
          <el-form-item label="学科名称">
            <!-- 输入框 -->
            <el-input v-model="Query.subjectName" placeholder=""></el-input>
          </el-form-item>
          <!-- 清除查询按钮   @click="shan(data.id)" -->
          <el-form-item>
            <el-button @click="clearable">清除</el-button>
            <el-button type="primary" @click="inquire">查询</el-button>
          </el-form-item>
          <!-- 操作按钮 -->
          <el-button
            style="float: right"
            type="success"
            icon="el-icon-edit"
            @click="addSubject"
            >新增学科</el-button
          >
        </el-form>
        <!-- 消息提示 -->
        <el-alert
          :closable="false"
          :title="`数据一共${total}条`"
          type="info"
          description
          show-icon
        >
        </el-alert>
      </div>

      <!-- 内容 -->
      <el-table :data="list">
        <el-table-column fixed type="index" label="序号" width="50" :index="indexMethod(1)">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="100">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="90">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="190">
          <template #default="scope">
            {{formatDate(scope.row.addDate)}}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="140">
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="100">
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="80"> </el-table-column>
        <el-table-column prop="totals" label="题目数量" width="80">
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="{ row }">
            <el-button
              type="text"
              size="mini"
              @click="classify(row.id, row.subjectName)"
              >学科分类</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="label(row.id, row.subjectName)"
              >学科标签</el-button
            >
            <el-button type="text" size="mini" @click="updSubject(row.id)"
              >修改</el-button
            >
            <el-button type="text" size="mini" @click="open(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :page-sizes="[5, 10, 20]"
          :page-size="10"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
          background
          @current-change="pageChange"
          @size-change="pageSize"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹框 -->
    <el-dialog
      :title="curid ? '修改学科':'新增学科'"
      :visible="dialogFormVisible"
      @close="closeDialog"
    >
      <el-form :model="form" :rules="ruleInline" ref="roleForm">
        <el-form-item label="学科名称" prop="name">
          <el-input v-model="form.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="form.isFrontDisplay" @change="changeSwitch"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addnewly">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹框 -->
    <el-button type="text" @click="open"></el-button>
  </div>
</template>

<script>
import { list, add, remove, detail, update } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      list: [], // 列表
      curid: '', // 回显
      modif: {}, // 修改
      Query: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      form: {
        // 弹框
        subjectName: '',
        isFrontDisplay: false // 是否启用
      },
      isstatus: 0,
      dialogFormVisible: false, // 默认关闭弹框
      ruleInline: {
        // 表单验证
        subjectName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ]
      },

      total: 0, // 条目总数
      input: '', // 输入框绑定值
      formInline: {
        user: '',
        region: ''
      },
      showList: {
        1: true,
        0: false
      }
    }
  },
  mounted () {
    // 获取列表数据
    this.loadsubjectslist()
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    changeSwitch (bool) {
      this.form.isFrontDisplay = bool
      // console.log(bool)
    },
    // 获取列表
    async loadsubjectslist () {
      const res = await list(this.Query)
      console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 时间格式化
    formatDate (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    // 序号
    indexMethod (index) {
      if (this.Query.page !== 1) {
        return (this.Query.page - 1) * this.Query.pagesize + 1
      } else {
        return index++
      }
    },
    // 分页
    pageChange (page) {
      this.Query.page = page
      this.loadsubjectslist()
    },
    // 每页几条
    pageSize (size) {
      this.Query.pagesize = size
      this.loadsubjectslist()
    },
    // 清空
    clearable () {
      this.Query.subjectName = ''
      this.loadsubjectslist()
    },
    // 查询
    inquire () {
      this.loadsubjectslist()

      // this.list = res.data.items
      // this.total = res.data.counts
    },
    // 弹框
    addnewly () {
      // 兜底
      this.$refs.roleForm.validate(async (valid) => {
        if (valid) {
          // console.log(this.showList[this.form.isFrontDisplay])
          if (this.curid) {
            console.log(this.curid)
            // 调用修改接口
            await update({
              subjectName: this.form.subjectName,
              id: this.curid,
              isFrontDisplay: this.form.isFrontDisplay
            })
            // 提示修改成功
            this.$message({
              type: 'success',
              message: '修改学科成功'
            })
          } else {
            // 调用新增接口
            await add({
              subjectName: this.form.subjectName,
              isFrontDisplay: this.form.isFrontDisplay
            })
            // 清空弹框
            this.form.subjectName = ''
            // 提示添加成功
            this.$message({
              type: 'success',
              message: '新增学科成功'
            })
          }

          // 刷新列表
          this.loadsubjectslist()
          // 关闭弹框
          this.dialogFormVisible = false
        }
      })
    },
    // 关闭弹框
    closeDialog () {
      this.dialogFormVisible = false
      this.form = {
        // 弹框
        subjectName: '',
        isFrontDisplay: 0 // 是否启用
      }
    },
    // 打开弹框
    openDialogs () {
      this.dialogFormVisible = true
    },
    // 修改学科
    updSubject (id) {
      this.dialogFormVisible = true
      this.curid = id
      this.subjectView()
    },
    // 点击修改学科的回显
    async subjectView () {
      const res = await detail({ id: this.curid })
      console.log(res)
      this.form.subjectName = res.data.subjectName
      this.form.isFrontDisplay = this.showList[res.data.isFrontDisplay]
      // console.log(this.form.sisFrontDisplay)
    },
    addSubject () {
      this.dialogFormVisible = true
    },
    // 学科分类
    classify (id, name) {
      this.$router.push({
        name: 'subjects-directorys',
        query: {
          id: id,
          name: name
        }
      })
    },
    // 学科标签
    label (id, name) {
      this.$router.push({
        name: 'subjects-tags',
        query: {
          id: id,
          name: name
        }
      })
    },

    // 删除
    open (id) {
      console.log(id)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 调用删除接口
          await remove({ id: id })
          // 更新列表
          this.loadsubjectslist()
          // 提示用户
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang='scss'>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.block {
  margin-top: 10px;
  text-align: right;
}
</style>
